<template>
  <view>
    <view class="header">
      <image src="/static/avatar.jpg"></image>
      <view>
        <label>{{ data.user.name }}</label>
        <label v-if="data.user.is_vip == 0" style="color: #666;">普通会员</label>
        <label v-if="data.user.is_vip == 1" style="color: #ff0000;">VIP会员</label>
      </view>
      <view @tap="gotoTranscationDetails">
        <label>余额(元)</label>
        <label style="color: #215476">{{ data.user.balance}}</label>
      </view>
    </view>
    <view class="menu_box">
      <view class="menu_title">
        <view>预约订单管理</view>
        <view @tap="gotoOrderDetails()" style="display: flex;align-items: center">查看全部 <u-icon name="arrow-right" color="#000" size="16"></u-icon></view>
      </view>
      <view class="menu_blocks">
        <view class="block" @tap="gotoOrderDetails(0)">
          <uni-icons type="wallet" size="30"></uni-icons>
          <view>待付款</view>
        </view>
        <view class="block" @tap="gotoOrderDetails(1)">
          <uni-icons type="compose" size="30"></uni-icons>
          <view>待入场</view>
        </view>
        <view class="block" @tap="gotoOrderDetails(2)">
          <uni-icons type="paperclip" size="30"></uni-icons>
          <view>待退场</view>
        </view>
        <view class="block" @tap="gotoOrderDetails(3)">
          <uni-icons type="vip" size="30"></uni-icons>
          <view>已完成</view>
        </view>
        <view class="block" @tap="gotoOrderDetails(5)">
          <uni-icons type="paperplane" size="30"></uni-icons>
          <view>退款/售后</view>
        </view>
      </view>
    </view>
    <!-- <view class="menu_box">
      <view class="menu_title">
        <view>商品订单管理</view>
        <view>查看全部</view>
      </view>
      <view class="menu_blocks">
        <view class="block">
          <uni-icons type="wallet" size="30"></uni-icons>
          <view>待付款</view>
        </view>
        <view class="block">
          <uni-icons type="wallet" size="30"></uni-icons>
          <view>待发货</view>
        </view>
        <view class="block">
          <uni-icons type="wallet" size="30"></uni-icons>
          <view>待收货</view>
        </view>
        <view class="block">
          <uni-icons type="wallet" size="30"></uni-icons>
          <view>已完成</view>
        </view>
        <view class="block">
          <uni-icons type="wallet" size="30"></uni-icons>
          <view>退款/售后</view>
        </view>
      </view>
    </view> -->
    <view class="columMenu">
      <!-- <view class="columItem">
        <view>我的团队</view>
        <view>></view>
      </view>
      <view class="columItem">
        <view>我的购物车</view>
        <view>></view>
      </view>
      <view class="columItem">
        <view>地址管理</view>
        <view>></view>
      </view>
      <view class="columItem">
        <view>用户协议</view>
        <view>></view>
      </view> -->
      <view class="columItem">
        <view>关于我们</view>
        <view>
          <u-icon name="arrow-right" color="#000" size="16"></u-icon>
        </view>
      </view>
      <view class="columItem">
        <view>联系我们</view>
        <view>
          <u-icon name="arrow-right" color="#000" size="16"></u-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default{
  data() {
    return {
      data: {}
    }
  },
  onLoad: function(option){
    let token = uni.getStorageSync('token')
    if(token) {
      this.getUserCenterData()
    }

  },
  methods: {
    // 获取个人中心数据
    getUserCenterData: function(){
      uni.showLoading({
        title: '加载中...'
      });

      uni.$u.http.post('getUserCenterData').then(res => {
        if(res.code == 200){
          this.data = res.data
        }else{
          uni.showToast({
            title: res.msg,
            icon: 'error',
            duration: 1000 // 提示框持续时间，单位为毫秒
          })
        }
      }).catch(error => {
        uni.showToast({
          title: '获取数据失败',
          icon: 'error',
          duration: 1000 // 提示框持续时间，单位为毫秒
        })
      }).finally(() => {
        uni.hideLoading()
      })
    },
    gotoTranscationDetails: function(status = ''){
      uni.navigateTo({
        url: `../transactionDetails/index`
      })
    },
    gotoOrderDetails: function(status = ''){
      uni.navigateTo({
        url: `/pages/order/order?status=${status}`
      })
    }

  }
}
</script>

<style>
.header{
  /* width: 100vw; */
  background: #fff;
  padding: 40rpx;
  display: flex;
  align-items: center;
}
.header image{
  width: 180rpx;
  height: 180rpx;
  background: #ccc;
  border-radius: 50%;
  display: flex;
}
.header > view{
  height: 125rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20rpx;
  text-align: center;
}
.header > view:last-child{
  margin-left: auto;
}
.header > view label:nth-child(1){
  font-size: 34rpx;
}
.header > view label:nth-child(2){
  font-size: 28rpx;
}
.menu_box{
  width: calc(100vw - 40rpx);
  margin: 30rpx 20rpx 0;
  padding-bottom: 20rpx;
  background: #fff;
  border-radius: 30rpx;
}
.menu_title{
  width: calc(100% - 60rpx);
  padding: 40rpx 0;
  margin: 0 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30rpx;
}
.menu_title view:first-child{
  font-weight: bold;
}
.menu_blocks{
  width: calc(100% - 120rpx);
  margin: 0 60rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block{
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 29rpx;
}
.block image{
  display: block;
  width: 80rpx;
  height: 80rpx;
  background: #ccc;
  margin-bottom: 20rpx;
}
.columMenu{
  width: calc(100vw - 40rpx);
  margin: 30rpx 20rpx 0;
  background: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
}
.columItem{
  width: 100%;
  padding-left: 20rpx;
  height: 90rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2rpx solid #ccc;
}
.columItem:last-of-type{
  border-bottom: 0;
}
</style>